<template>
    <div class="page">
        <p>树状图</p>
        <div id="container"></div>
        <p>连线为直线得树状图图</p>
        <div id="container1"></div>
    </div>
</template>
<script>
import * as d3 from "d3"
export default {
    data() {
        return {
            city: {
                name: "中国",
                children: [
                    {
                        name: "浙江",
                        children: [
                            { name: "杭州" },
                            { name: "宁波" },
                            { name: "温州" },
                            { name: "绍兴" }
                        ]
                    },
                    {
                        name: "浙江",
                        children: [
                            { name: "杭州" },
                            { name: "宁波" },
                            { name: "温州" },
                            { name: "绍兴" }
                        ]
                    },
                    {
                        name: "广西",
                        children: [
                            {
                                name: "桂林",
                                children: [
                                    { name: "秀峰区" },
                                    { name: "叠彩区" },
                                    { name: "象山区" },
                                    { name: "七星区" }
                                ]
                            },
                            { name: "南宁" },
                            { name: "柳州" },
                            { name: "防城港" }
                        ]
                    }
                ]
            }
        }
    },
    methods: {
        draw() {
            let svgWidth = 800,
                svgHeight = 800
            this.svg = d3
                .select("#container")
                .append("svg")
                .attr("width", svgWidth)
                .attr("height", svgHeight)
            let root = d3.hierarchy(this.city)
            let treeLayout = d3.tree().size([svgWidth - 100, svgHeight - 100])
            treeLayout(root)
            let gTree = this.svg
                .append("g")
                .attr("transform", `translate(${40},${0})`)
            gTree
                .append("g")
                .attr("fill", "none")
                .attr("stroke", "#555")
                .attr("stroke-opacity", 0.4)
                .attr("stroke-width", 1.5)
                .selectAll(".link")
                .data(root.links())
                .join("path")
                .attr("class", "link")
                .attr(
                    "d",
                    d3
                        .linkHorizontal()
                        .x(d => d.y)
                        .y(d => d.x)
                )
            let node = gTree
                .append("g")
                .attr("stroke-linejoin", "round")
                .attr("stroke-width", 3)
                .selectAll("g")
                .data(root.descendants())
                .join("g")
                .attr("transform", d => `translate(${d.y},${d.x})`)
            node.append("circle")
                .attr("fill", d => (d.children ? "#555" : "$999"))
                .attr("r", 2.5)
            node.append("text")
                .attr("dy", "0.31em")
                .attr("x", d => (d.children ? -5 : 5))
                .attr("text-anchor", d => (d.children ? "end" : "start"))
                .text(d => d.data.name)
                .clone(true)
                .lower()
                .attr("stroke", "white")
                .attr("stroke-width", 10)
        },
        draw1() {
            let svgWidth = 800,
                svgHeight = 800
            this.svg = d3
                .select("#container1")
                .append("svg")
                .attr("width", svgWidth)
                .attr("height", svgHeight)
            let root = d3.hierarchy(this.city)
            let treeLayout = d3
                .tree()
                .size([svgWidth - 100, svgHeight - 100])
            treeLayout(root)
            console.log(root.links())
            let links = root.links()
            let realLinks = []
            for (let i = 0; i < links.length; i++) {
                realLinks.push(links[i].source.path(links[i].target))
            }
            console.log(realLinks)
            let gCluster = this.svg
                .append("g")
                .attr("transform", `translate(${40},${0})`)
            gCluster
                .append("g")
                .attr("fill", "none")
                .attr("stroke", "#555")
                .attr("stroke-opacity", 0.4)
                .attr("stroke-width", 1.5)
                .selectAll(".link")
                .data(realLinks)
                .join("path")
                .attr("class", "link")
                .attr(
                    "d",
                    d3
                        .line()
                        .curve(d3.curveStep)
                        .x(d => d.y)
                        .y(d => d.x)
                )
            let node = gCluster
                .append("g")
                .attr("stroke-linejoin", "round")
                .attr("stroke-width", 3)
                .selectAll("g")
                .data(root.descendants())
                .join("g")
                .attr("transform", d => `translate(${d.y},${d.x})`)
            node.append("circle")
                .attr("fill", d => (d.children ? "#555" : "$999"))
                .attr("r", 2.5)
            node.append("text")
                .attr("dy", "0.31em")
                .attr("x", d => (d.children ? -5 : 5))
                .attr("text-anchor", d => (d.children ? "end" : "start"))
                .text(d => d.data.name)
                .clone(true)
                .lower()
                .attr("stroke", "white")
                .attr("stroke-width", 10)
        }
    },
    mounted() {
        this.draw()
        this.draw1()
    }
}
</script>
